<section class="search-section">
    <form class="form-inline" role="form" name="pkgForm">
        <table class="table-form tc">
            <tr>
                <td width="8%"><label for="pkg-name">Package Name</label></td>
                <td width="10%">
                    <input type="text" ng-model="queryParams.packageName" class="form-control" id="pkg-name"
                           placeholder="">
                </td>
                <td width="8%"><label for="app-num">App Number</label></td>
                <td width="15%">
                    <input type="text" app-number placeholder="Integer" ng-model="queryParams.quantity"
                           class="form-control" id="app-num">
                </td>
                <td width="15%"><label for="create-time">Package Generation Time</label></td>
                <td width="10%">
                    <div class="input-append date" id="create-time" datetimepicker>
                        <input type="text" ng-model="queryParams.createTime" class="form-control"
                               placeholder="YYYY-MM-DD" readonly>
                        <span class="add-on"><i class="icon-remove"></i></span>
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </td>
                <td>
                    <button type="submit" class="btn btn-primary search-btn" ng-click="queryPkg(1)"
                            ng-disabled="pkgForm.$invalid">Search
                    </button>
                </td>
            </tr>
            <tr>
                <td width="8%"><label for="release-time">Release Time</label></td>
                <td width="10%">
                    <div class="input-append date" id="release-time" datetimepicker>
                        <input type="text" ng-model="queryParams.releaseTime" class="form-control"
                               placeholder="YYYY-MM-DD" readonly>
                        <span class="add-on"><i class="icon-remove"></i></span>
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </td>
            </tr>
        </table>
    </form>

    <header class="main-content-header">
        <h5>Resource and Operation</h5>
    </header>
    <section class="operation">
        <button class="btn btn-primary" ng-click="releasePkg()">Release Package</button>
        <button class="btn btn-primary" ng-click="dissolutionPkg()">Dissolution Package</button>
    </section>
    <section class="result">
        <table class="table table-result">
            <thead>
            <tr>
                <th width="8%">
                    <chkbox-all></chkbox-all>
                    All Select
                </th>
                <th width="10%">Package ID</th>
                <th width="20%">Package Name</th>
                <th width="10%">App Numbers</th>
                <th width="9%">App List</th>
                <th width="15%">Package Generation Time</th>
                <th width="8%">Package Size</th>
                <th width="19%">Release Time</th>
            </tr>
            </thead>
            <tbody>
            <tr class="tr-container">
                <td colspan="100%">
                    <div class="tbody">
                        <table class="table table table-striped">
                            <tbody>
                            <tr ng-repeat="pkg in pkgs">
                                <td width="8%">
                                    <chkbox data-id="{{pkg.id}}"></chkbox>
                                </td>
                                <td width="10%">{{pkg.id}}</td>
                                <td width="20%">{{pkg.packageName}}</td>
                                <td width="10%">{{pkg.appQuantity}}</td>
                                <td width="9%"><a data-id="{{pkg.id}}" ng-click="queryApp($event)">View List</a></td>
                                <td width="15%">{{pkg.createTime}}</td>
                                <td width="8%">{{pkg.packageSize | size}}</td>
                                <td width="19%">{{pkg.releaseTime}}</td>
                            </tr>
                            <tr class="page-box">
                                <td colspan="8">
                                    <div class="pagination" id="pagination"></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </section>
</section>

<!--view list-->
<div class="modal fade" id="app-list">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">App List Details</h4>
            </div>
            <div class="modal-body">
                <table class="table table-result">
                    <thead>
                    <tr>
                        <th width="5%">App ID</th>
                        <th width="7%">App Name</th>
                        <th width="10%">Last Version</th>
                        <th width="15%">App Source Channel</th>
                        <th width="10%">Upload Time</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="tr-container">
                        <td colspan="100%">
                            <div class="tbody">
                                <table class="table table-striped">
                                    <tbody>
                                    <tr ng-repeat="app in apps">
                                        <td width="5%">{{app.id}}</td>
                                        <td width="7%">{{app.appName}}</td>
                                        <td width="10%">{{app.versionName}}</td>
                                        <td width="15%">{{app.sourceChannelStr}}</td>
                                        <td width="10%">{{app.createTime}}</td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->